Developer API

Using Input Manager

Namespace: $GG.ui.input

The $GG.ui.input namespace is designed to handle user input within the application. It provides a flexible system for attaching and releasing event handlers to stages and stage props, facilitating interaction between the user and the visual elements. This namespace is essential for capturing and responding to various input events, such as mouse clicks, keyboard presses, and touch gestures, enabling dynamic and interactive user interfaces.

Include In Html

<head>
    ...
    <script src="https://launch.gig.game/api/js?key={API KEY HERE}&libraries=ui"></script>
    ...
</head>

Types

eventType

Namespace: $GG.ui.input.eventType

Provides the event types for input handling. These are categorized into PC events, mobile events, and gesture events.

Details?

Available Event Types:

PC Events

PC events cover interactions primarily made using a mouse or keyboard. These events are essential for desktop applications where user input is predominantly through these devices.

  • RESIZE: Triggered when the window is resized.
  • KEY_DOWN: Triggered when a key is pressed down.
  • KEY_UP: Triggered when a key is released.
  • MOUSE_MOVE: Triggered when the mouse pointer is moved.
  • MOUSE_UP: Triggered when a mouse button is released.
  • MOUSE_CLICK: Triggered when a mouse button is clicked.
  • MOUSE_CLICK_OUT: Triggered when a mouse click happens outside of a specified element.
  • MOUSE_DOUBLE_CLICK: Triggered when a mouse button is double-clicked.
  • RIGHT_MOUSE_CLICK: Triggered when the right mouse button is clicked.
  • CENTER_MOUSE_CLICK: Triggered when the center mouse button is clicked.
  • RIGHT_MOUSE_UP: Triggered when the right mouse button is released.
  • CENTER_MOUSE_UP: Triggered when the center mouse button is released.
  • MOUSE_SCROLL_UP: Triggered when the mouse wheel is scrolled up.
  • MOUSE_SCROLL_DOWN: Triggered when the mouse wheel is scrolled down.
  • MOUSE_ENTER: Triggered when the mouse pointer enters the boundaries of an element.
  • MOUSE_LEAVE: Triggered when the mouse pointer leaves the boundaries of an element.
  • MOUSE_CANVAS_ENTER: Triggered when the mouse pointer enters the canvas.
  • MOUSE_CANVAS_LEAVE: Triggered when the mouse pointer leaves the canvas.
Mobile Events

Mobile events are designed to handle interactions on touch-enabled devices. These events are crucial for applications targeting smartphones and tablets.

  • TOUCH_START: Triggered when a touch point is placed on the touch surface.
  • TOUCH_MOVE: Triggered when a touch point is moved along the touch surface.
  • TOUCH_END: Triggered when a touch point is removed from the touch surface.
  • TOUCH_CANCEL: Triggered when a touch point is interrupted in some way (e.g., by an alert).
  • DEVICE_ORIENTATION: Triggered when the device orientation changes.
  • DEVICE_MOTION: Triggered when the device motion changes.
  • VISIBILITY_CHANGE: Triggered when the visibility state of the document changes.
Gesture Events

Gesture events recognize complex touch interactions and motion patterns. These events are useful for providing more intuitive and natural user interactions.

  • SWIPE_LEFT: Triggered when a swipe left gesture is detected.
  • SWIPE_RIGHT: Triggered when a swipe right gesture is detected.
  • TAP: Triggered when a tap gesture is detected.
  • TAP_OUT: Triggered when a tap happens outside of a specified element.
  • DOUBLE_TAP: Triggered when a double-tap gesture is detected.
  • PINCH: Triggered when a pinch gesture is detected.
  • EXPAND: Triggered when an expand gesture is detected.
  • ROTATE: Triggered when a rotate gesture is detected.
  • SHAKE: Triggered when a shake gesture is detected.

Example Usage

Below is an example demonstrating how to use the $GG.ui.input namespace to handle different input events. This example shows how to attach event handlers for mouse click and touch start events, and how to manage these events to interact with a canvas element.

class ClickableProp extends $GG.ui.visual.type.props.base {
     onInit() {
	    console.log('object started!');
     }

	onStage() {
	     // Was our stage prop clicked on?
	     $GG.ui.input.attach($GG.ui.input.eventType.MOUSE_CLICK, this, this.handleMouseClick);

	     // Was our stage prop touched?
	     $GG.ui.input.attach($GG.ui.input.eventType.TOUCH_START, this, this.handleTouchStart);
	}

	onUnstage() {
		//detatch events if we are not onscreen
	     $GG.ui.input.release(this);
	}

	// Function to handle mouse click events
	handleMouseClick(event) {
	    console.log('Mouse clicked at:', event.canvasX, event.canvasY);
	    // Implement your logic here
	}

	// Function to handle touch start events
	handleTouchStart(event) {
	    console.log('Touch started at:', event.touches[0].clientX, event.touches[0].clientY);
	    // Implement your logic here
	}
}